<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
  <el-drawer
    size="300px"
    :visible="visible"
    :append-to-body="true"
    :title="'退货操作'"
    @update:visible="updateVisible" @open="init">
    <el-form label-width="77px" :model="form" class="ele-form-search">
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="入库单号">
            <el-input v-model="form.rkvbillcode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="客户编码">
            <el-input v-model="form.custcode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="客户名称">
            <el-input v-model="form.custname" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="入库数量">
            <el-input v-model="form.rksl" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="materialItem.invcode">
        <el-col :lg="24" :md="24">
          <el-form-item label="药品编码">
            <el-input v-model="materialItem.invcode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="materialItem.invcode">
        <el-col :lg="24" :md="24">
          <el-form-item label="申请数量">
            <el-input v-model="materialItem.nnum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="materialItem.invcode">
        <el-col :lg="24" :md="24">
          <el-form-item label="含税单价">
            <el-input v-model="materialItem.ntaxprice" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="materialItem.invcode">
        <el-col :lg="24" :md="24">
          <el-form-item label="批号">
            <el-input v-model="materialItem.vlotno" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="退货原因">
            <el-select class="my-el-select" v-model="form.realreason">
              <el-option v-for="item in returnReasonList" :key="item.code" :label="item.name" :value="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="后续处理">
            <el-select class="my-el-select" v-model="form.opertype">
              <el-option label="" value=""/>
              <el-option label="退厂" value="退厂"/>
              <el-option label="再销售" value="再销售"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="备注">
            <textarea  v-model="form.remark" rows="8" style="width: 98%"></textarea>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="">
            <el-button
              type="primary"
              icon="el-icon-save"
              class="ele-btn-icon"
              @click="reload">确定
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </el-drawer>
</template>

<script>
import Locale from 'element-ui/lib/mixins/locale';
// 默认主题色
const DEFAULT_THEMES = [
  {
    name: 'default',
    value: null,
    color: '#1890ff'
  },
  {
    name: 'dust',
    value: '#5f80c7'
  },
  {
    name: 'sunset',
    value: '#faad14'
  },
  {
    name: 'volcano',
    value: '#f5686f'
  },
  {
    name: 'purple',
    value: '#9266f9'
  },
  {
    name: 'cyan',
    value: '#2bccce'
  },
  {
    name: 'green',
    value: '#33cc99'
  },
  {
    name: 'geekblue',
    value: '#32a2d4'
  }
];

export default {
  name: 'EleProSetting',
  mixins: [Locale],
  emits: [
    'change-style',
    'change-color',
    'change-dark-mode',
    'change-weak-mode',
    'update:visible'
  ],
  props: {
    // 是否显示, 支持.sync修饰
    visible: Boolean,
    // 颜色选择器预设颜色
    data: Array,
    material:Array
  },
  data() {
    let chooseColor = this.color;
    if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
      (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
        if (this.color === t.value) {
          chooseColor = null;
        }
      });
    }
    return {
      form:{},
      materialItem:{},
      returnReasonList:[],
      // 默认的主题色
      defaultThemes: DEFAULT_THEMES,
      // 颜色选择器选中颜色
      chooseColor: chooseColor
    };
  },
  mounted() {
    this.getReturnReasonList();
    console.log(this.data);
    console.log(this.material);
    if(this.data)
    {
      this.form = Object.assign({},this.data[0]);
    }
  },
  methods: {
    /* 修改visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    init(){
      this.form = {};
      this.materialItem = {};
      if(this.data && this.data.length>0)
      {
        this.form = Object.assign({},this.data[0]);
      }
      if(this.material && this.material.length>0)
      {
        this.materialItem = Object.assign({},this.material[0]);
        this.form.opertype = this.materialItem.opertype;
        this.form.realreason = this.materialItem.realreason;
      }

    },
    reload(){
      this.updateVisible(false);
      if(this.material && this.material.length>0)
      {
        this.$emit('donematerial',this.form.realreason,this.form.remark,this.form.opertype);
      }
      else
      {
        this.$emit('done',this.form.realreason,this.form.remark,this.form.opertype);

      }
    },
    getReturnReasonList(){
      this.$http.get('/dictdata/index?dictId=5&page=1&limit=1000').then(res => {
        this.returnReasonList = res.data.data.records;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 切换主题色 */
    changeColor(value) {
      if (value !== this.color) {
        this.$emit('change-color', value);
      }
    },
    /* 修改主题风格 */
    changeStyle(key, value) {
      this.$emit('change-style', {key: key, value: value});
    },
    setHeadStyle(value) {
      this.changeStyle('headStyle', value);
    },
    setSideStyle(value) {
      this.changeStyle('sideStyle', value);
    },
    setLayoutStyle(value) {
      this.changeStyle('layoutStyle', value);
    },
    setSideMenuStyle(value) {
      this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
    },
    setBodyFull(value) {
      this.changeStyle('bodyFull', value);
    },
    setFixedHeader(value) {
      this.changeStyle('fixedHeader', value);
    },
    setFixedSidebar(value) {
      this.changeStyle('fixedSidebar', value);
    },
    setFixedBody(value) {
      this.changeStyle('fixedBody', value);
      if (value) {
        document.body.style.width = null;
      }
    },
    setLogoAutoSize(value) {
      this.changeStyle('logoAutoSize', value);
    },
    setColorfulIcon(value) {
      this.changeStyle('colorfulIcon', value);
    },
    setSideUniqueOpen(value) {
      this.changeStyle('sideUniqueOpen', value);
    },
    setWeakMode(value) {
      this.$emit('change-weak-mode', value);
    },
    setDarkMode(value) {
      this.$emit('change-dark-mode', value);
    },
    setShowFooter(value) {
      this.changeStyle('showFooter', value);
      if (!value) {
        document.body.style.width = null;
      }
    },
    setShowTabs(value) {
      this.changeStyle('showTabs', value);
    },
    setTabStyle(value) {
      this.changeStyle('tabStyle', value);
    }
  }
}
</script>

<style scoped>
.ele-setting-wrapper {
  padding: 20px 18px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  margin-bottom: 15px;
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme > div {
  width: 52px;
  height: 36px;
  line-height: 1;
  font-size: 18px;
  border-radius: 3px;
  margin: 0 20px 30px 0;
  padding: 14px 0 0 24px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .2s;
}

.ele-setting-wrapper .ele-setting-theme > div:before,
.ele-setting-wrapper .ele-setting-theme > div:after,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  content: "";
  width: 100%;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color .2s;
}

.ele-setting-dark .ele-setting-theme > div {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ele-setting-dark .ele-setting-theme > div:before,
.ele-setting-dark .ele-setting-theme > div:after,
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
  background: #1f1f1f;
}

.ele-setting-wrapper .ele-setting-theme > div:after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
  background: #001529;
}

.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  z-index: 1;
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  color: #fff;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  line-height: 22px;
  border-radius: 2px;
  margin: 8px 8px 0 0;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  vertical-align: top;
  position: relative;
  text-align: center;
  cursor: pointer;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-title {
  flex: 1;
  line-height: 28px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-control {
  line-height: 1;
  max-width: 95px;
}

.ele-setting-wrapper .el-divider {
  margin-bottom: 20px;
}

/* 颜色选择器 */
.ele-setting-color-picker.el-color-picker {
  height: auto;
  margin-top: 8px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__trigger {
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color {
  border: none;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color-inner {
  border-radius: 2px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__empty {
  background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  border-radius: 2px;
  font-size: 0;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__icon {
  font-size: 14px;
}
.el-row {
  margin-bottom: -10px;
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap
}
</style>
